<?php

use app\models\AsrCallClassify;
use yii\helpers\Html;
/* @var $this yii\web\View */
$this->title = '  ';
$this->params['breadcrumbs'][] = $this->title;
?>
<script src="<?= Yii::$app->homeUrl?>assets/public/js/jquery.min.js"></script>
<link rel="stylesheet" href="<?= Yii::$app->homeUrl?>assets/public/bootstrap/dist/css/bootstrap.min.css">
<script src="<?= Yii::$app->homeUrl?>assets/public/component/chart.js/Chart.js"></script>
<!--今日数据展示-->

<section class="content">
    <div class="row">
        <div class="col-md-6">
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title">今日拨打总数：<span><?=$todayall?></span> &nbsp;&nbsp;接听率：<span><?=$todayratio?></span></h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
<!--                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>-->
                    </div>
                </div>
                <div class="box-body">
                    <canvas id="pieChart" style="height: 222px; width: 445px;" width="445" height="222"></canvas>
                </div>
                <!-- /.box-body -->
            </div>


            <div class="col-xs-6">
                <p class="lead">数据统计</p>

                <div class="table-responsive">
                    <table class="table" style="font-size:16px;">
                        <tbody><tr>
                            <th style="width:50%">总计拨打:</th>
                            <td><?php $all = AsrCallClassify::find()->count();echo $all;?>条</td>
                        </tr>
                        <tr>
                            <th>接听总数：</th>
                            <td><div style="color:#08801b"><?php $allanwer = AsrCallClassify::find()->where(['is_answer'=>1])->count(); echo $allanwer;?>条</div></td>
                        </tr>
                        <tr>
                            <th>未接通总数：</th>
                            <td><div style="color:#ff5d73"><?php $allnotanwer = AsrCallClassify::find()->where(['is_answer'=>0])->count(); echo $allnotanwer;?>条</div></td>
                        </tr>
                        <tr>
                            <th>平均接听率:</th>
                            <td><div style="color:#2186e2"><?php echo round($allanwer/$all*100,2) ."%";?></div></td>
                        </tr>
                        </tbody></table>
                </div>
            </div>




            <!-- /.box -->

        </div>
        <!-- /.col (LEFT) -->
        <div class="col-md-6">
            <!-- BAR CHART -->
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">最近7天检查状况</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
<!--                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>-->
                    </div>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <canvas id="barChart" style="height: 230px; width: 787px;" width="787" height="230"></canvas>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col (RIGHT) -->
    </div>
    <!-- /.row -->

</section>


<script>
    $(function () {
        /* ChartJS
         * -------
         * Here we will create a few charts using ChartJS
         */

        //--------------
        //- AREA CHART -
        //--------------
        function GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth()+1;//获取当前月份的日期
            var d = dd.getDate();
            return y+"-"+m+"-"+d;
        }
        var areaChartData = {
            labels  : [GetDateStr(-6), GetDateStr(-5), GetDateStr(-4), GetDateStr(-3), GetDateStr(-2), GetDateStr(-1),  GetDateStr(0)],
            datasets: [
                {
                    label               : 'Electronics',
                    fillColor           : 'rgba(0, 166, 90, 1)',
                    strokeColor         : 'rgba(0, 166, 90, 1)',
                    pointColor          : 'rgba(0, 166, 90, 1)',
                    pointStrokeColor    : '#c1c7d1',
                    pointHighlightFill  : '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data                : [<?= $todayanwer6?>, <?= $todayanwer5?>, <?= $todayanwer4?>, <?= $todayanwer3?>, <?= $todayanwer2?>, <?= $todayanwer1?>, <?= $todayanwer?>
                    ]
                },
                {
                    label               : 'Digital Goods',
                    fillColor           : 'rgba(60,141,188,0.9)',
                    strokeColor         : 'rgba(60,141,188,0.8)',
                    pointColor          : '#3b8bba',
                    pointStrokeColor    : 'rgba(60,141,188,1)',
                    pointHighlightFill  : '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data                : [<?= $todaynotanwer6?>, <?= $todaynotanwer5?>, <?= $todaynotanwer4?>, <?= $todaynotanwer3?>, <?= $todaynotanwer2?>, <?= $todaynotanwer1?>, <?= $todaynotanwer?>]
                }
            ]
        }

        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d');
        var pieChart       = new Chart(pieChartCanvas);
        <?php if($todaynotanwer || $todayanwer){ echo "var PieData        = [
            {
                value    : $todaynotanwer,
                color    : '#f56954',
                highlight: '#f56954',
                label    : '未接听'
            },
            {
                value    : $todayanwer,
                color    : '#00c0ef',
                highlight: '#00c0ef',
                label    : '接听'
            },

        ]"; }else{ echo "var PieData        = [
            {
                value    :  true,
                color    : '#F56954',
                highlight: '#F56954',
                label    : '检测数为 0'
            },
            ]";
        }
    ?>

        var pieOptions     = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke    : true,
            //String - The colour of each segment stroke
            segmentStrokeColor   : '#fff',
            //Number - The width of each segment stroke
            segmentStrokeWidth   : 2,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps       : 100,
            //String - Animation easing effect
            animationEasing      : 'easeOutBounce',
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate        : true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale         : false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive           : true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio  : true,
            //String - A legend template
            legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions)

        //-------------
        //- BAR CHART -
        //-------------
        var barChartCanvas                   = $('#barChart').get(0).getContext('2d')
        var barChart                         = new Chart(barChartCanvas)
        var barChartData                     = areaChartData
        barChartData.datasets[1].fillColor   = '#F56954'
        barChartData.datasets[1].strokeColor = '#F56954'
        barChartData.datasets[1].pointColor  = '#00a65a'
        var barChartOptions                  = {
            //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero        : true,
            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines      : true,
            //String - Colour of the grid lines
            scaleGridLineColor      : 'rgba(0,0,0,.05)',
            //Number - Width of the grid lines
            scaleGridLineWidth      : 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines  : true,
            //Boolean - If there is a stroke on each bar
            barShowStroke           : true,
            //Number - Pixel width of the bar stroke
            barStrokeWidth          : 2,
            //Number - Spacing between each of the X value sets
            barValueSpacing         : 5,
            //Number - Spacing between data sets within X values
            barDatasetSpacing       : 1,
            //String - A legend template
            legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
            //Boolean - whether to make the chart responsive
            responsive              : true,
            maintainAspectRatio     : true
        }

        barChartOptions.datasetFill = false
        barChart.Bar(barChartData, barChartOptions)
    })
</script>
